<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2. 父组件监听自定义事件 -->
    <Son
      :title="myTitle"
      :hobby="myHobby"
      @changeTitle="handleChange"
      @changeHobby="handleHobby"
    ></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  data() {
    return {
      myTitle: "好好学前端",
      myHobby: "敲代码",
    };
  },
  components: {
    Son,
  },
  methods: {
    // 3. 提供处理函数, 形参中获取参数
    handleChange(title) {
      // console.log(title);
      this.myTitle = title;
    },

    handleHobby(hobby) {
      this.myHobby = hobby;
    },
  },
};
</script>

<style>
</style>